<script setup lang="ts">
import { onMounted, ref } from "vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
import PlayMusic from "@/components/PlayMusic/index.vue";

import { themeChange } from "theme-change";

const globalConfig = useStore().globalConfig;
const prizeConfig = useStore().prizeConfig;
const system = useStore().system;
const { getTheme: localTheme } = storeToRefs(globalConfig);
const { getPrizeConfig: prizeList } = storeToRefs(prizeConfig);
// const { getIsMobile: isMobile } = storeToRefs(system)

const tipDialog = ref();
// const isMobileValue = ref(structuredClone(isMobile.value))
const setLocalTheme = (theme: any) => {
  themeChange(theme.name);
};

// 设置当前奖列表
const setCurrentPrize = () => {
  if (prizeList.value.length <= 0) {
    return;
  }
  for (let i = 0; i < prizeList.value.length; i++) {
    if (!prizeList.value[i].isUsed) {
      prizeConfig.setCurrentPrize(prizeList.value[i]);

      break;
    }
  }

  return;
};
// 判断是否手机端访问
const judgeMobile = () => {
  const ua = navigator.userAgent;
  const isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1;
  const isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

  system.setIsMobile(isAndroid || isIOS);

  return isAndroid || isIOS;
};
// 判断是否chrome或者edge访问
const judgeChromeOrEdge = () => {
  const ua = navigator.userAgent;
  const isChrome = ua.indexOf("Chrome") > -1;
  const isEdge = ua.indexOf("Edg") > -1;

  system.setIsChrome(isChrome);

  return isChrome || isEdge;
};
onMounted(() => {
  setLocalTheme(localTheme.value);
  setCurrentPrize();
  if (judgeMobile() || !judgeChromeOrEdge()) {
    tipDialog.value.showModal();
  }
});
</script>

<template>
  <dialog id="my_modal_1" ref="tipDialog" class="border-none modal">
    <div class="modal-box">
      <h3 class="text-lg font-bold">提示!</h3>
      <p class="py-4" v-if="judgeMobile()">
        请使用PC进行访问以获得最佳显示效果
      </p>
      <p class="py-4" v-if="!judgeChromeOrEdge()">
        请使用最新版Chrome或者Edge浏览器
      </p>
      <div class="modal-action">
        <form method="dialog" class="flex justify-start w-full gap-3">
          <!-- if there is a button in form, it will close the modal -->
          <button class="btn">确定</button>
        </form>
      </div>
    </div>
  </dialog>
  <router-view></router-view>
  <!-- <PlayMusic class="absolute right-0 bottom-1/2"></PlayMusic> -->
</template>

<style scoped lang="scss"></style>
